/* eslint-disable no-unused-expressions */
/* eslint-disable jsx-a11y/alt-text */
import React, { Component } from 'react'
import { Icon } from 'antd';
import "./index.scss"
export default class index extends Component {
  constructor() {
    super()
    this.state = {
      goodslist: [],
      tupians: []
    }
  }
  componentDidMount = async () => {
    const data = await this.$axios.get("http://localhost:5000/gridsLists")
    this.setState({
      goodslist: data.data
    })
    const res = await this.$axios.get("http://localhost:5000/tupians")
    this.setState({
      tupians: res.data
    })
  }
  handleenter = (e) => {
    if (e.target.className === "goods-inner") {
      e.target.style.border = "1px solid #e5e5e5"
      e.target.style.backgroundColor = "#fff"
      e.target.style.boxShadow = "0 0 6px rgba(0, 0, 0, .1)"
    }
  }
  handleout = (e) => {
    e.target.style.border = "none"
    e.target.style.backgroundColor = "none"
    e.target.style.boxShadow = "none"
  }
  handlemore = () => {
    document.querySelector(".oper-sec").style.height = "420px"
    document.querySelector(".oper-sec-cnt").style.height = "397px"
    document.querySelector(".oper-sec").style.transition = "all 0.5s ease"
    document.querySelector(".oper-sec-more").style.display = "none"
    document.querySelector(".oper-sec-shou").style.display = "block"
  }
  handleshou = () => {
    document.querySelector(".oper-sec-shou").style.display = "none"
    document.querySelector(".oper-sec").style.height = "224px"
    document.querySelector(".oper-sec-cnt").style.height = "200px"
    document.querySelector(".oper-sec-more").style.display = "block"
  }
  handlered = (e) => {
    e.target.style.color = "red"
  }
  handleblock = (e) => {
    e.target.style.color = "#000"
  }
  handletupian = (e) => {
    e.target.style.display = "none"
    e.target.parentNode.children[1].style.display = "block"
    e.target.parentNode.style.border = "1px solid #f10180"
    e.target.parentNode.style.margin = "0 0 0 0"
  }
  handlehuilai = (e) => {
    e.target.style.display = "none"
    e.target.parentNode.children[0].style.display = "block"
    e.target.parentNode.style.border = "1px solid #f0f0f0"
    e.target.parentNode.style.margin = "0 -1px -1px 0"
  }
  handlesecBlock = (e) => {
    e.target.style.display = "none"
    document.getElementsByClassName("oper-sec-none")[0].style.display="block"
    document.getElementsByClassName("oper-sec-none")[1].style.display="block"
    document.querySelector(".cat-oper-down").style.display = "inline-block"
  }
  handlesecNone=(e)=>{
    e.target.style.display = "none"
    document.getElementsByClassName("oper-sec-none")[0].style.display="none"
    document.getElementsByClassName("oper-sec-none")[0].style.display="none"
    document.querySelector(".cat-oper-up").style.display = "inline-block"
  }
  handlepre=(e)=>{
    var list = this.state.goodslist
    for(var i=0;i<list.length;i++){
      for(var j=i+1;j<list.length;j++){
        if(list[i].new_pro>list[j].new_pro){
          var tmp=list[i]
          list[i]=list[j]
          list[j]=tmp
        }
      }
    }
    e.target.style.border="1px solid red"
    e.target.style.backgroundColor="#fff"
    e.target.style.color="red"
    document.querySelector(".oper-hd-general").style.border="0"
    document.querySelector(".oper-hd-general").style.color="#424141"
    document.querySelector(".oper-hd-general").style.backgroundColor="#f5f5f5"
    this.setState({
      goodslist:list
    })
  }
  render() {
    return (
      <div>
        <div className="oper-top-box main">
          <div className="oper-top-cnt">
            <div className="oper-sec">
              <div className="oper-sec-tit">品牌</div>
              <div className="oper-sec-cnt">
                <div className="oper-sec-cnt-con">
                  {
                    this.state.tupians.map((item, index) => {
                      return <div className="oper-sec-cnt-con-logo" key={index} >
                        <img src={item.img} onMouseEnter={this.handletupian} />
                        <span onMouseLeave={this.handlehuilai}>{item.name}</span>
                      </div>
                    })
                  }
                </div>
              </div>
              <div className="oper-sec-more" onClick={this.handlemore} onMouseEnter={this.handlered} onMouseLeave={this.handleblock}>更多</div>
              <div className="oper-sec-shou" onClick={this.handleshou} onMouseEnter={this.handlered} onMouseLeave={this.handleblock}>收起</div>
            </div>
            <div className="oper-sec-pro">
              <div className="oper-sec-tit">版型</div>
              <div className="oper-sec-cnt">
                <span>紧身</span>
                <span>修身</span>
                <span>常规</span>
                <span>直筒</span>
                <span>宽松</span>
                <span>收腰</span>
              </div>
            </div>
            <div className="oper-sec-pro">
              <div className="oper-sec-tit">裙长</div>
              <div className="oper-sec-cnt">
                <span>长裙</span>
                <span>中长裙</span>
                <span>短裙</span>
                <span>超短裙</span>
                <span>前短后长</span>
              </div>
            </div>
            <div className="oper-sec-pro">
              <div className="oper-sec-tit">裙型</div>
              <div className="oper-sec-cnt">
                <span>蛋糕裙</span>
                <span>铅笔裙</span>
                <span>伞裙</span>
                <span>仙女裙</span>
                <span>运动群</span>
                <span>鱼尾裙</span>
                <span>蓬蓬裙</span>
                <span>花苞裙</span>
                <span>a字群</span>
              </div>
              <div className="oper-sec-more">更多</div>
            </div>
            <div className="oper-sec-pro">
              <div className="oper-sec-tit">颜色</div>
              <div className="oper-sec-cnt">
                <span>银色</span>
                <span>青色</span>
                <span>咖色</span>
                <span>驼色</span>
                <span>杏色</span>
                <span>米色</span>
                <span>裸色</span>
                <span>炫色</span>
                <span>褐色</span>
                <span>花色</span>
                <span>黄色</span>
              </div>
              <div className="oper-sec-more">更多</div>
            </div>
            <div className="oper-sec-pro oper-sec-none">
              <div className="oper-sec-tit">尺码</div>
              <div className="oper-sec-cnt">
                <span>XXS</span>
                <span>XS</span>
                <span>S</span>
                <span>M</span>
                <span>L</span>
                <span>XL</span>
                <span>XXL</span>
                <span>XXXL</span>
                <span>XXXXL</span>
                <span>XXXXXL</span>
                <span>XXXXXXL</span>
              </div>
              <div className="oper-sec-more">更多</div>
            </div>
            <div className="oper-sec-pro oper-sec-none">
              <div className="oper-sec-tit">腰型</div>
              <div className="oper-sec-cnt">
                <span>高腰</span>
                <span>低腰</span>
                <span>中腰</span>
                <span>其他</span>
              </div>
            </div>
          </div>
          <div className="cat-oper-ft">
            <span className="cat-oper-up" onClick={this.handlesecBlock}>更多选项</span>
            <span className="cat-oper-down" onClick={this.handlesecNone}>收起</span>
          </div>
        </div>
        <div className="oper-content-warp main">
          <div className="m-cat-paging">
            <span className="total"><i>1</i>/1448</span>
            <span className="pre"><Icon type="left" /></span>
            <span className="next">下一页 <Icon type="right" /></span>
          </div>
          <div className="oper-hd-general">
            综合
          </div>
          <div className="oper-hd-price" onClick={this.handlepre}>
            价格
          </div>
          <div className="oper-hd-price">
            折扣
          </div>
        </div>
        <div className="goods-list main clearfix">
          {
            this.state.goodslist.map((el, index) => {
              return <div key={index} className="goods-inner" onMouseEnter={this.handleenter} onMouseLeave={this.handleout}>
                <img src={el.img} />
                <div className="goods-info">
                  <span className="left">￥{el.new_pro}</span>
                  <span className="right">{el.old_pro}</span>
                </div>
                <div className="goods-tit">{el.tit}</div>
              </div>
            })
          }
        </div>
      </div>

    )
  }
}
